<template>
  <a-modal
    :visible="visible"
    title="组节点设置"
    width="500px"
    @ok="handleSave"
    @cancel="handleCancel"
    :confirmLoading="loading"
  >
    <div class="group-settings">
      <!-- 标签输入 -->
      <div class="setting-item">
        <label class="setting-label">标签：</label>
        <a-input
          v-model="formData.label"
          placeholder="请输入组节点标签"
          style="width: 200px"
        />
      </div>
      <!-- 组类型选择 -->
      <div class="setting-item">
        <label class="setting-label">组类型：</label>
        <a-select
          v-model="formData.groupType"
          style="width: 200px"
          placeholder="请选择组类型"
          @change="onGroupTypeChange"
        >
          <a-select-option value="array">遍历数组</a-select-option>
          <a-select-option value="fixed">固定次数</a-select-option>
        </a-select>
      </div>

      <!-- 遍历数组配置 -->
      <div v-if="formData.groupType === 'array'" class="setting-section">
        <div class="section-title">遍历数组配置</div>
        <div class="setting-item">
          <label class="setting-label">数组对象：</label>
          <a-input
            v-model="formData.arrayObject"
            placeholder="请输入数组对象名称"
            style="width: 200px"
          />
        </div>
        <div class="setting-item">
          <label class="setting-label">对象变量名称：</label>
          <a-input
            v-model="formData.itemVariable"
            placeholder="请输入对象变量名称"
            style="width: 200px"
          />
        </div>
        <div class="setting-item">
          <label class="setting-label">下标变量名称：</label>
          <a-input
            v-model="formData.indexVariable"
            placeholder="请输入下标变量名称"
            style="width: 200px"
          />
        </div>
        <!-- 输出变量区域（公用 OutputVariablesSection） -->
        <OutputVariablesSection
          :outputVariables.sync="formData.outputVariables"
          :collapsed="false"
          :nodeType="'group'"
        />
      </div>

      <!-- 固定次数配置 -->
      <div v-if="formData.groupType === 'fixed'" class="setting-section">
        <div class="section-title">固定次数配置</div>
        <div class="setting-item">
          <label class="setting-label">循环次数：</label>
          <a-input-number
            v-model="formData.fixedCount"
            :min="1"
            :max="1000"
            placeholder="请输入循环次数"
            style="width: 200px"
          />
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script>
import OutputVariablesSection from './OutputVariablesSection.vue'
export default {
  name: 'GroupSettingsDialog',
  components: { OutputVariablesSection },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    groupData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      loading: false,
      formData: {
        label: '',
        groupType: 'array',
        // 遍历数组配置
        arrayObject: '',
        itemVariable: '',
        indexVariable: '',
        // 固定次数配置
        fixedCount: 1,
        // 输出变量
        outputVariables: []
      }
    }
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        this.initFormData()
      }
    },
    groupData: {
      handler(newVal) {
        if (newVal && this.visible) {
          this.initFormData()
        }
      },
      deep: true
    }
  },
  methods: {
    initFormData() {
      // 从传入的groupData初始化表单数据
      if (this.groupData && this.groupData.groupSettings) {
        const settings = this.groupData.groupSettings
        this.formData = {
          label: settings.label || '',
          groupType: settings.groupType || 'array',
          arrayObject: settings.arrayObject || '',
          itemVariable: settings.itemVariable || '',
          indexVariable: settings.indexVariable || '',
          fixedCount: settings.fixedCount || 1,
          outputVariables: Array.isArray(settings.outputVariables) ? settings.outputVariables.slice() : []
        }
      } else {
        // 默认值
        this.formData = {
          label: '',
          groupType: 'array',
          arrayObject: '',
          itemVariable: '',
          indexVariable: '',
          fixedCount: 1,
          outputVariables: []
        }
      }
    },
    
    onGroupTypeChange(value) {
      this.formData.groupType = value
      // 切换类型时清空相关字段
      if (value === 'array') {
        this.formData.fixedCount = 1
      } else if (value === 'fixed') {
        this.formData.arrayObject = ''
        this.formData.itemVariable = ''
        this.formData.indexVariable = ''
      }
    },
    
    handleSave() {
      // 验证表单
      if (!this.validateForm()) {
        return
      }
      this.loading = true
      try {
        // 构建保存的数据
        const settings = {
          label: this.formData.label,
          groupType: this.formData.groupType
        }
        if (this.formData.groupType === 'array') {
          settings.arrayObject = this.formData.arrayObject
          settings.itemVariable = this.formData.itemVariable
          settings.indexVariable = this.formData.indexVariable
          settings.outputVariables = this.formData.outputVariables.filter(v => v.name.trim())
        } else if (this.formData.groupType === 'fixed') {
          settings.fixedCount = this.formData.fixedCount
        }
        // 触发保存事件
        this.$emit('save', settings)
        this.loading = false
      } catch (error) {
        console.error('保存组设置失败:', error)
        this.loading = false
        this.$message.error('保存失败')
      }
    },
    
    validateForm() {
      if (this.formData.groupType === 'array') {
        if (!this.formData.arrayObject.trim()) {
          this.$message.error('请输入数组对象名称')
          return false
        }
        if (!this.formData.itemVariable.trim()) {
          this.$message.error('请输入对象变量名称')
          return false
        }
        if (!this.formData.indexVariable.trim()) {
          this.$message.error('请输入下标变量名称')
          return false
        }
      } else if (this.formData.groupType === 'fixed') {
        if (!this.formData.fixedCount || this.formData.fixedCount < 1) {
          this.$message.error('请输入有效的循环次数')
          return false
        }
      }
      
      return true
    },
    
    handleCancel() {
      this.$emit('cancel')
    }
  }
}
</script>

<style scoped>
.group-settings {
  padding: 10px 0;
}

.setting-item {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.setting-label {
  width: 120px;
  font-weight: 500;
  color: #333;
  flex-shrink: 0;
}

.setting-section {
  margin-top: 20px;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.section-title {
  font-weight: 600;
  color: #495057;
  margin-bottom: 16px;
  font-size: 14px;
}
.output-var-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
</style> 